<!--
 * @Author: your name
 * @Date: 2021-03-21 19:10:12
 * @LastEditTime: 2021-03-25 19:53:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \practice\demo\src\views\seckill.vue
-->
<template>
  <div>
      <!-- 秒杀页面 -->
      <div id="seckill">
          <h3 id="seckill_kill">限时秒杀</h3>
          <div id="seckill_time">
            <dl>
                <dt>10：00</dt>
                <dd>已开抢</dd>
            </dl> 
            <dl>
                <dt>热抢好货</dt>
                <dd>已开抢</dd>
            </dl>
            <dl>
                <dt>11:00</dt>
                <dd>抢购进行中</dd>        
            </dl>
            <dl>
                <dt>12:00</dt>
                <dd>即将开场</dd>
            </dl>
            <dl>
                <dt>13:00</dt>
                <dd>即将开场</dd>
            </dl>
          </div> 
          <div id="seckill_time_group" v-for="item in list" :key="item.id">
              <dl id="seckill_time_one">
                  <dt><img src="../images/02.jpg"/></dt>
                  <dd>雅思摩拉</dd>
                  <dd><span>呀耶呀耶</span></dd>
                  <dd><button id="zhe">折上折</button></dd>
                  <dd><span id="price">￥{{item[0].seckill_price}}</span></dd>
                  <dd><button id="now" @click="rub">马上抢</button></dd>
              </dl>
              <dl>
                  <dt><img src="../images/02.jpg"/></dt>
                  <dd>乳酸菌儿</dd>
                  <dd><span>呀耶呀耶呀耶</span></dd>
                  <dd><button id="zhe">折上折</button></dd>
                  <dd><span id="price">￥250</span></dd>
                  <dd><button id="now" @click="rub">马上抢</button></dd>
              </dl>
              <dl>
                  <dt><img src="../images/02.jpg"/></dt>
                  <dd>卡卡卡</dd>
                  <dd><span>呀耶呀耶呀耶</span></dd>
                  <dd><button id="zhe">折上折</button></dd>
                  <dd><span id="price">￥{{item[0].seckill_price}}</span></dd>
                  <dd><button id="now" @click="rub">马上抢</button></dd>
              </dl>
              <dl>
                  <dt><img src="../images/02.jpg"/></dt>
                  <dd>卡卡卡</dd>
                  <dd><span>呀耶呀耶呀耶</span></dd>
                  <dd><button id="zhe">折上折</button></dd>
                  <dd><span id="price">￥{{item[0].seckill_price}}</span></dd>
                  <dd><button id="now" @click="rub">马上抢</button></dd>
              </dl>
          </div>
      </div>
    </div>
</template>

<script>
import {getSeckill} from '@/api/seckill'
export default {
    data(){
      return {
          list:[]
      }
    },
    methods:{
        rub(){
            //购物车
            this.$router.push('/shoppingcar')
        }
    },
    async created(){
      const res=await getSeckill()
      this.list= res.data;  
    //   console.log(this.list,'list')
    }
}
</script>

<style lang='scss'>
    #seckill_time_group #seckill_time_one{
        width: 400px;
        height: 120px;
        margin-top: 10px;
    }
    #seckill_time_group img{
        margin:20px 15px;
    }
    #seckill_time_group dd{
        margin-top: 40px;
    }
    #seckill_time_group #zhe{
        width: 50px;
        height: 20px;
        background: purple;
        color: white;
        outline: none;
        font-size: 8px;
        border: none;
        border-radius: 10px;
    }
    #seckill_time_group #now{
        width: 50px;
        height: 25px;
        border: 1px solid red;
        border-radius: 10px;
        outline: none;
        background: white;
        font-weight: bold;
        color: red;
        font-size: 10px;
    }
    #seckill_time_group #price{
        font-size: 15px;
        color: red;
    }
    #seckill_time_group{
        width: 450px;
        height: 600px;
        /* border: 1px solid grey; */
        background: rgb(238, 238, 238);
        margin-top: 40px;
        position: relative;
    }
    #seckill_time_group dl{
        width: 400px;
        height: 120px;
        /* border:1px solid grey; */
        display: flex;
        flex-direction: row;
        margin-top: 20px;
        margin-left: 25px;
        border-radius: 10px;
        background: white;
    }
    #seckill_time_group img{
        width: 80px;
        height: 80px;
    }
    #seckill,
    #seckill_time
    {
        width: 450px;
    }
    #seckill{
        height: 200px;
        background: linear-gradient(to right,rgb(243, 189, 89),rgb(245, 71, 71));
        margin:0 auto;
        position: relative;
    }
    #seckill_kill{
        color: white;
        margin-left: 200px;
    }
    #seckill_time dl{
        margin: 0 auto;        
        color: rgb(223, 201, 201);
        line-height: 21px;
    }
    #seckill_time dt{
        font-size: 18px;
    }
    #seckill_time dd{
        font-size: 2px;
    }
    #seckill_time dl:hover{
        color: white;
    }
    #seckill_time{
        height: 50px;
        margin-top: 10px;
        display: flex;
    }
    #seckill_change{
        font-size: 12px;
    }
</style>    